<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .wrap {
        width: 800px;
        height: 400px;
        margin: 0 auto;
      }

      table {
        margin: 20px auto;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <table cellspacing="20">
        <tr>
          <th><input type="checkbox" value="全选" id="all" /></th>
          <th>产品</th>
          <th>价钱</th>
        </tr>
        <tr>
          <td><input type="checkbox" class="check" /></td>
          <td>iphone</td>
          <td>5000</td>
        </tr>
        <tr>
          <td><input type="checkbox" class="check" /></td>
          <td>iwatch</td>
          <td>2000</td>
        </tr>
        <tr>
          <td><input type="checkbox" class="check" /></td>
          <td>ipad</td>
          <td>3000</td>
        </tr>
      </table>
      <button class="inverse">反选</button>
    </div>

    <script>
        var chekcAllBtn = document.querySelector('#all');
        var checkboxArr = document.querySelectorAll('.check');
        var reverseBtn = document.querySelector('.inverse');
        chekcAllBtn.onchange = function(){
        // 思考： 这里打印的值是变化前的还是变化后的
            console.log(this.checked);
            var status = this.checked;
            // // 如果被选中
            // if(status){
            //     for(var i = 0 ; i < checkboxArr.length ; i ++){
            //         checkboxArr[i].checked = status;
            //     }
            // }else{
            //     for(var i = 0 ; i < checkboxArr.length ; i ++){
            //         checkboxArr[i].checked = status;
            //     }
            // }
            for(var i = 0 ; i < checkboxArr.length ; i ++){
                checkboxArr[i].checked = status;
            }
        }
        // 给每一个元素添加onchange事件
        for(var i = 0 ; i < checkboxArr.length ; i ++){
            checkboxArr[i].onchange = function(){
                // 本身不用处理任何内容，但是需要处理关联的是否全选的按钮的状态
                // 检测是否应该处于全选？
                // 检测如果所有的都和当前状态一致，则需要修改all为当前状态
                var nowStatus = this.checked;
                // 如果是选中的
                if(nowStatus){
                    // // 标识位：
                    // var isCheckAll = true;
                    //  for(var j = 0 ; j < checkboxArr.length ; j ++ ){
                    //     // 只要有一个没选中
                    //     if(!checkboxArr[j].checked){
                    //         // 全选就应该是取反状态
                    //         isCheckAll = false;
                    //         break;
                    //     }
                    // } 
                    // chekcAllBtn.checked = isCheckAll;  
                    changeAllStatus(); 
                }else{
                    // 有一个非选中 全选肯定是非选中
                    chekcAllBtn.checked = false;
                }
               
            }
        }
        /**
        * 反选逻辑
        **/
        reverseBtn.onclick = function(){
            for(var i = 0 ; i < checkboxArr.length ; i ++){
                checkboxArr[i].checked = !checkboxArr[i].checked;
            }
            // 判断全选状态
            changeAllStatus();
        }

        /**
        * 是否改变全选的状态
        **/
        function changeAllStatus (){
             // 标识位：
            var isCheckAll = true;
            for(var j = 0 ; j < checkboxArr.length ; j ++ ){
                // 只要有一个没选中
                if(!checkboxArr[j].checked){
                    // 全选就应该是取反状态
                    isCheckAll = false;
                    break;
                }
            } 
            chekcAllBtn.checked = isCheckAll; 
        }
        
    </script>
  </body>
</html>
